<!doctype html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>源码来自：http://www.htmleaf.com/Demo/201603243256.html</title>
		<style>
			.pignose-parallaxslider {
				display: block;
				width: 100%;
				margin: 0 auto;
				overflow: hidden
			}

			.pignose-parallaxslider,
			.pignose-parallaxslider * {
				box-sizing: content-box;
				-o-box-sizing: content-box;
				-moz-box-sizing: content-box;
				-webkit-box-sizing: content-box
			}

			.pignose-parallaxslider .slide-visual {
				width: 1000px;
				height: 400px;
				margin: 0 auto;
				position: relative
			}

			.pignose-parallaxslider .slide-visual .slide_tint {
				position: absolute;
				top: 0;
				z-index: 50;
				width: 2000px;
				height: 100%;
				background-color: #fff;
				opacity: .6;
				filter: alpha(opacity=60);
				-ms-filter: alpha(opacity=60)
			}

			.pignose-parallaxslider .slide-visual .slide_tint.left {
				right: 1000px
			}

			.pignose-parallaxslider .slide-visual .slide_tint.right {
				left: 1000px
			}

			.pignose-parallaxslider .slide-visual .slide-group {
				margin: 0;
				padding: 0;
				list-style: none
			}

			.pignose-parallaxslider .slide-visual .script-wrap {
				width: 276px;
				height: 288px;
				padding: 20px;
				position: absolute;
				top: 36px;
				right: 100px
			}

			.pignose-parallaxslider .slide-visual .script-wrap .script-inner {
				overflow: hidden;
				position: relative
			}

			.pignose-parallaxslider .slide-visual .script-wrap .script-tint {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				background-color: #fff;
				opacity: .6;
				filter: alpha(opacity=60);
				-ms-filter: alpha(opacity=60)
			}

			.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination {
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				padding: 40px 20px;
				z-index: 60;
				text-align: center;
				box-sizing: border-box;
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box
			}

			.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination .btn-page {
				display: inline-block;
				width: 8px;
				height: 8px;
				margin: 0 2px;
				border-radius: 50%;
				border: 1px solid #fff;
				text-indent: -10000px;
				overflow: hidden;
				-moz-transition: background-color .3s ease;
				-webkit-transition: background-color .3s ease;
				-o-transition: background-color .3s ease;
				transition: background-color .3s ease
			}

			.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination .btn-page.on,
			.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination .btn-page:focus,
			.pignose-parallaxslider .slide-visual .script-wrap .slide-pagination .btn-page:hover {
				background-color: #fff
			}

			.pignose-parallaxslider .slide-visual .script-wrap .slide-controller {
				position: absolute;
				left: 0;
				bottom: 84px;
				width: 100%;
				text-align: center;
				z-index: 60
			}

			.pignose-parallaxslider .slide-visual .script-wrap .slide-controller a {
				display: inline-block;
				margin: 0 20px;
				opacity: .6;
				filter: alpha(opacity=60);
				-ms-filter: alpha(opacity=60);
				-moz-transition: opacity .3s ease;
				-webkit-transition: opacity .3s ease;
				-o-transition: opacity .3s ease;
				transition: opacity .3s ease
			}

			.pignose-parallaxslider .slide-visual .script-wrap .slide-controller a:focus,
			.pignose-parallaxslider .slide-visual .script-wrap .slide-controller a:hover {
				opacity: 1;
				filter: alpha(opacity=100);
				-ms-filter: alpha(opacity=100)
			}

			.pignose-parallaxslider .slide-visual .script-wrap .script-group {
				margin: 0;
				padding: 0;
				position: relative;
				list-style: none;
				z-index: 50;
				overflow: hidden
			}

			.pignose-parallaxslider .slide-visual .script-wrap .script-group li {
				float: left
			}
		</style>
	</head>
	<body>
		<div id="wrapper">
			<div id="visual">
				<div class="slide-visual">
					<!-- Slide Image Area (1000 x 424) -->
					<ul class="slide-group">
						<li><img src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/6.png"
								alt="slide image" /></li>
						<li><img src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/7.png"
								alt="slide image" /></li>
						<li><img src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/4.png"
								alt="slide image" /></li>
						<li><img src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/3.png"
								alt="slide image" /></li>
						<li><img src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/2.png"
								alt="slide image" /></li>
						<li><img src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/1.png"
								alt="slide image" /></li>
					</ul>

					<!-- Slide Description Image Area (316 x 328) -->
					<div class="script-wrap">
						<ul class="script-group">
							<li>
								<div class="inner-script"><img
										src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/6.png"
										alt="thumbnail slider image" /></div>
							</li>
							<li>
								<div class="inner-script"><img
										src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/7.png"
										alt="thumbnail slider image" /></div>
							</li>
							<li>
								<div class="inner-script"><img
										src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/4.png"
										alt="thumbnail slider image" /></div>
							</li>
							<li>
								<div class="inner-script"><img
										src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/3.png"
										alt="thumbnail slider image" /></div>
							</li>
							<li>
								<div class="inner-script"><img
										src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/2.png"
										alt="thumbnail slider image" /></div>
							</li>
							<li>
								<div class="inner-script"><img
										src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/1.png"
										alt="thumbnail slider image" /></div>
							</li>
						</ul>
						<div class="slide-controller">
							<a href="#" class="btn-prev">1</a>
							<a href="#" class="btn-play">2</a>
							<a href="#" class="btn-pause">3</a>
							<a href="#" class="btn-next">4</a>
						</div>
					</div>
				</div>
			</div>
		</div>


		<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
		<script>
			window.jQuery || document.write('<script src="../jquery相关/js/jq.js"><\/script>')
		</script>
		<script type="text/javascript" src="js/easying.js"></script>
		<script type="text/javascript" src="js/parallaxslider.js"></script>
		<script type="text/javascript">
			$(window).load(function() {
				$('#visual').pignoseParallaxSlider({
					play: '.btn-play',
					pause: '.btn-pause',
					next: '.btn-next',
					prev: '.btn-prev'
				});
			});
		</script>
	</body>
</html>
